<template>
    <div id="page-my-invoice">
        <div class="page-title">
            位置：我的发票
        </div>
        <div class="invoice-wrap">
            <div class="top-menu-wrap">
                <ul class="tab-list">
                    <li :class="{active:showType==1}" @click="tabType(1)"><i class="icon"></i><span>未开发票</span></li>
                    <li :class="{active:showType==2}" @click="tabType(2)"><i class="icon"></i><span>已开发票</span></li>
                </ul>
<!--                <span>起始时间：</span>-->
            </div>
            <div class="invoice-box not-invoicing" v-show="showType==1">
                <table id="order-list">
                    <thead>
                    <tr>
                        <td>
                            <input id="checkbox-all" type="checkbox" v-model="checkAllInvoice" value="all"><label @click="checkAll" for="checkbox-all"></label>
                            订单描述
                        </td>
                        <td>购买日期</td>
                        <td>金额</td>
                        <td>订单详情</td>
                    </tr>
                    </thead>
                    <tbody element-loading-text="拼命加载中..."
                           v-if="orderList.length"
                           v-loading="loading">
                        <tr :key="item.id" v-for="(item,index) in orderList">
                            <td class="item-main">
                                <input :id="'checkbox-'+index" :value="item.orderId" ref="check-invoice" type="checkbox" v-model="checkedInvoice"><label :for="'checkbox-'+index"></label>
                                {{item.orderDescribe}}
                            </td>
                            <td class="date">{{item.orderCreateTime}}</td>
                            <td>{{(item.cashFee/100).toFixed(2)}}</td>
                            <td class="control">
                                <span @click="goOrderDetail(item.orderId)">详情</span>
                            </td>
                        </tr>

                    </tbody>
                    <tbody v-else>
                        <tr>
                            <td colspan="4">暂无已支付订单！</td>
                        </tr>
                    </tbody>
                </table>
                <div class="bottom-wrap">
                    <button @click="fillInvoice" id="btn-invoicing">索取发票</button>
                    <div class="sign">
                        <span class="up">合计开发票金额：<span class="total-fee">¥{{totalFee}}</span></span><br>
                        <span class="down">建议:可选择多个订单合并开具发票。支付成功后7个工作日内,发票即可寄出,请注意查收。</span>
                    </div>
                </div>
            </div>
            <div class="invoice-box is-invoicing" v-show="showType==2">
                <table id="invoice-list">
                    <thead>
                        <tr>
                            <td>
                                申请时间
                            </td>
                            <td>发票抬头</td>
                            <td>发票金额</td>
                            <td>发票状态</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody element-loading-text="拼命加载中..."
                           v-loading="loading">
                    <tr :key="item.id" v-for="item in invoiceList">
                        <td class="date">
                            {{item.invoiceCreateTime}}
                        </td>
                        <td class="item-main">{{item.invoiceTitle}}</td>
                        <td>{{(item.invoiceMoney/100).toFixed(2)}}</td>
                        <td>
                            {{
                                item.invoiceMakeOutStatus==0?'开票中':
                                item.invoiceMakeOutStatus==1?'已开':
                                item.invoiceMakeOutStatus==2?'完成':
                                item.invoiceMakeOutStatus==3?'重开':
                                item.invoiceMakeOutStatus==4?'已废弃':
                                item.invoiceMakeOutStatus==5?'未支付':
                                item.invoiceMakeOutStatus==9?'退票中':
                                item.invoiceMakeOutStatus==10?'已退票':
                                '未知'
                            }}
                        </td>
                        <td class="control">
                            <span
                                @click="returnInvoice(item.invoiceId)"
                                v-if="item.invoiceMakeOutStatus==0||item.invoiceMakeOutStatus==1||item.invoiceMakeOutStatus==2">
                                退票 |
                            </span>
                            <span @click="goMyInvoiceDetail(item.invoiceId)">详情</span>
                        </td>
                    </tr>
                    <tr v-if="invoiceList.length==0">
                        <td colspan="5">暂无发票信息！</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="mask-layer" v-show="maskShow">
            <div @click.self="closeMask" class="mask"></div>
            <div class="content request-invoice" v-if="maskType==1">
                <div class="top">
                    <i class="icon icon-invoice-info"></i>
                    <span>发票信息</span>
                </div>
                <hr style="margin: 0;padding: 0;">
                <form action="" id="request-invoice">
                    <div class="radio invoice-type-radio">
                        <input checked id="pay-type-1" name="invoice-type" type="radio" v-model="invoiceType" value="1">
                        <label class="radio-label" for="pay-type-1">
                            单位
                        </label>
                        <input id="pay-type-2" name="invoice-type" type="radio" v-model="invoiceType" value="2">
                        <label class="radio-label" for="pay-type-2">
                            个人
                        </label>
                    </div>
                    <div class="form-item input-invoice-title two-item">
                        <span class="left">
                            <span class="title"><span class="must-fill">*</span>发票抬头：</span>
                            <input :class="{'format-error':invoiceTitleError}"
                                   id="input-invoice-title"
                                   placeholder="单位名称"
                                   type="text"
                                   v-model="invoiceTitle"
                            >
                            <span class="format-error-sign">发票抬头不能为空</span>
                        </span>
                        <span class="right">
                            <span class="title"><span class="must-fill" v-if="invoiceType==1">*</span>税号：</span>
                            <input :class="{'format-error':invoiceDutyParagraphError}"
                                   id="input-invoice-number"
                                   placeholder="纳税人识别号"
                                   type="text"
                                   v-model="invoiceDutyParagraph"
                            >
                            <span class="format-error-sign">税号不能为空</span>
                        </span>

                    </div>
                    <span class="format-error-sign">税号不能为空</span>
                    <div class="form-item invoice-content">
                        <span class="left">
                            <span class="title">发票内容：</span>
                            <span>{{invoiceContent}}</span>
                        </span>
                        <span class="left" style="margin-left: 85px;">
                            <span class="title">发票金额：</span>
                            <span>{{totalFee}}</span>
                        </span>
                    </div>
                    <hr>
                    <div class="form-item name-phone two-item">
                        <span class="left">
                            <span class="title"><span class="must-fill">*</span>收件人姓名：</span>
                            <input :class="{'format-error':invoiceRecipientsError}"
                                   id="input-name"
                                   placeholder="姓名"
                                   style="width: 138px;"
                                   type="text"
                                   v-model="invoiceRecipients"
                            >
                            <span class="format-error-sign">姓名不能为空</span>
                        </span>
                        <span class="right">
                            <span class="title"><span class="must-fill">*</span>手机号：</span>
                            <input :class="{'format-error':invoicePhoneError}"
                                   id="input-contacts-phoneNumber"
                                   placeholder="手机号码"
                                   type="text"
                                   v-model="invoicePhone">
                        <span class="format-error-sign">手机号码格式不正确</span>
                        </span>

                    </div>
                    <div class="form-item detail-address">
                        <span class="right">
                            <span class="title"><span class="must-fill">*</span>邮寄地址：</span>
                            <input :class="{'format-error':detailAddressError}"
                                   id="input-detail-address"
                                   placeholder="用于接收发票的详细地址"
                                   type="text"
                                   v-model="detailAddress">
                            <span class="format-error-sign">地址不能为空</span>
                        </span>
                    </div>
                </form>
                <hr>
                <div class="dangers-sign">
                    <i class="icon"></i>
                    <span>
                        请仔细核对信息，因信息错误产生的费用平台不予承担 <br>
                        由于税务开票数量限制，需满<span class="high-light">200元可开具发票</span>，金额不足时，需到付邮费。<br>
                        申请成功后<span class="high-light">7个工作日内</span>发票即可寄出，请注意查收。
                    </span>
                </div>
                <hr>
                <div class="btn">
                    <button @click="closeMask" class="cancel">取消</button>
                    <button @click="requestAddInvoice" class="confirm">提交申请</button>
                </div>
            </div>
            <div class="content return-invoice" v-if="maskType==2">
                <div class="top">
                    <i class="icon icon-invoice-info"></i>
                    <span>发票退票</span>
                </div>
                <hr style="margin: 0;padding: 0;">
                <form action="" id="return-invoice">
                    <div class="form-item">
                        <span class="title"><span class="must-fill">*</span>退票原因：</span>
                        <el-select placeholder="请选择" style="width: 250px;" v-model="selectReturnType">
                            <el-option
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                    v-for="item in returnTypeList">
                            </el-option>
                        </el-select>
                        <span class="not-return-reason" v-if="!selectReturnType">请选择退票原因</span>
                    </div>
                    <div class="form-item detail-address">
                        <span class="right">
                            <span class="title">备注：</span>
                            <textarea id="textarea-remarks"
                                   type="text"
                                   v-model="remarks">
                            </textarea>
                        </span>
                    </div>
                </form>
                <hr>
                <div class="dangers-sign">
                    <i class="icon"></i>
                    <span>
                        说明：不接收到付的快递。因我方过失造成发票作废或更换的,请与工作人员联系进行确认,确认后将返还快递费用。因您的预留信息或其他原因需要退、换发票产生的往返运费由您来承担。
                    </span>
                </div>
                <div class="express-info">
                    <p>邮寄地址</p>
                    <p>
                        <span>地址：北京市丰台区南四环西路186号汉威国际一区201室</span>
                    </p>
                    <p class="clear-fix">
                        <span class="left">收件人：马老师</span>
                        <span class="right">电话：0108587089-855</span>
                    </p>
                </div>

                <hr>
                <div class="btn">
                    <button @click="closeMask" class="cancel">取消</button>
                    <button @click="requestReturnInvoice" class="confirm">提交申请</button>
                </div>
            </div>
        </div>
        <dialog-box
                v-if="dialogBoxShow"
                :show-cancel="false"
                :show-close="false"
                confirm-text="关闭"
                confirm-text-color="#F67B14"
                sign-text="请至少选择一个订单！"
                @closeDialogBox="closeDialogBox"
        >
        </dialog-box>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                loading:true,
                maskShow:false,
                dialogBoxShow:false,
                maskType:1,//1申请开票、2退票
                showType:1,
                orderList:[],
                checkAllInvoice:'',
                invoiceList:[],
                checkedInvoice:[],
                invoiceType:1,//抬头类型 1单位、2个人
                invoiceExclusiveType:0,//发票类型 0普通发票、1专用发票,
                invoiceTitle:'',
                invoiceDutyParagraph:'',//税号
                invoiceContent: "咨询服务费",
                invoiceRecipients:'',//联系人姓名
                invoicePhone:'',
                detailAddress:'',
                payType:1,
                invoiceTitleError:false,
                invoiceDutyParagraphError:false,
                invoiceRecipientsError:false,
                invoicePhoneError:false,
                detailAddressError:false,
                preReturnInvoiceId:'',
                returnTypeList:[],//退票原因
                selectReturnType:'',//选择的退款原因
                remarks:'',//退款备注
                inputExpressType:'',//快递名称
                inputExpressNumber:'',//运单号
                inputExpressTypeError:false,
                inputExpressNumberError:false,
            }
        },
        watch:{
            checkedInvoice(val){
                let checkedAll = true;
                checkedAll = val.length===this.orderList.length;
                this.checkAllInvoice = checkedAll;
            },
            invoiceType(val){
                this.invoiceDutyParagraphError = val==1&&this.invoiceDutyParagraph.trim() === '';
            },
            invoiceTitle(val){
                this.invoiceTitleError = val.trim() === '';
            },
            invoiceDutyParagraph(val){
                this.invoiceDutyParagraphError = this.invoiceType==1&&val.trim() === '';
            },
            invoiceRecipients(val){
                this.invoiceRecipientsError = val.trim() === '';
            },
            invoicePhone(val){
                this.invoicePhoneError = !this.utils.testPhoneNumber(val);
            },
            address(val){
                this.addressError =  val.trim() === '';
            },
            detailAddress(val){
                this.detailAddressError =  val.trim() === '';
            },
            inputExpressType(val){
                this.inputExpressTypeError =  val.trim() === '';
            },
            inputExpressNumber(val){
                this.inputExpressNumberError =  val.trim() === '';
            },
        },
        computed:{
            totalFee(){
                let totalFee = 0;
                this.orderList.forEach(item=>{
                    this.checkedInvoice.forEach(item2=>{
                        if(item.orderId==item2){
                            totalFee+=item.cashFee
                        }
                    })
                });
                return (totalFee/100).toFixed(2);
            },
        },
        mounted() {
            this.requestOrderList();
        },
        methods:{
            closeDialogBox(res){
                if(res.confirm){
                    console.log('点击取消');
                    /*this.$message({
                        type: 'info',
                        message: '已取消本次操作！'
                    });*/
                    this.dialogBoxShow = false;
                }
            },
            tabType(type){
                this.showType = type;
                if(type==1){//未开发票
                    if(this.orderList.length===0){
                        this.requestOrderList();
                    }
                }else {//已开发票
                    if(this.invoiceList.length===0){
                        this.requestInvoiceList();
                    }
                }
            },
            checkAll(){
                setTimeout(()=>{
                    this.checkedInvoice = [];
                    if(this.checkAllInvoice){
                        this.orderList.forEach(item=>{
                            this.checkedInvoice.push(item.orderId)
                        });
                    }
                })
            },
            goOrderDetail(id){
                this.$router.push({
                    name: 'personal-order-detail',
                    query:{
                        id
                    }
                });
            },
            closeMask(){
                this.maskShow = false;
            },
            goMyInvoiceDetail(id){
                this.$router.push({
                    name:'personal-invoice-detail',
                    query:{
                        id
                    }
                });
            },
            returnInvoice(id){
                this.preReturnInvoiceId = id;
                if(this.returnTypeList.length===0){
                    this.$request.returnInvoiceReason().then(res=>{
                        console.log(res);
                        if(res.status==200){
                            this.returnTypeList = res.data;
                        }else {
                            this.requestError(res.status,res.message);
                        }
                    },err=>{
                        console.log(err);
                        this.requestFail(err);
                    })
                }
                this.maskShow = true;
                this.maskType = 2;

            },
            requestReturnInvoice(){
                // eslint-disable-next-line no-unused-vars
                let pass = true;
                if(!this.selectReturnType){
                    pass = false;
                }
                /*if(this.inputExpressType===''){
                    pass = false;
                    this.inputExpressTypeError = true;
                }
                if(this.inputExpressNumber===''){
                    pass = false;
                    this.inputExpressNumberError = true;
                }*/
                if(pass){
                    this.$request.returnInvoice({
                        invoiceId: this.preReturnInvoiceId,
                        refundLogistics: this.inputExpressType,
                        refundProgress: 0,
                        refundReason: this.selectReturnType,
                        refundRemark: this.remarks,
                        refundWaybill: this.inputExpressNumber
                    }).then(res=>{
                        console.log(res);
                        if(res.status==200){
                            this.requestInvoiceList();
                            this.requestOrderList();
                            this.maskShow = false;
                            this.$message({
                                type:'success',
                                message:'请求成功！'
                            });
                        }else {
                            this.requestError(res.status,res.message);
                        }
                    },err=>{
                        console.log(err);
                        this.requestFail(err);
                    })
                }

            },
            fillInvoice(){
                this.maskType = 1;
                if(this.checkedInvoice.length){
                    this.maskShow = true;
                }else {
                    // this.$store.commit('changeDialogBoxShow',true);
                    this.dialogBoxShow = true;
                }
            },
            requestAddInvoice(){
                // eslint-disable-next-line no-unused-vars
                let pass = true;
                if(this.invoiceTitle.trim()===''){
                    pass = false;
                    this.invoiceTitleError = true;
                }
                if(this.invoiceType==1&&this.invoiceDutyParagraph.trim()===''){
                    pass = false;
                    this.invoiceDutyParagraphError = true;
                }
                if(this.invoiceRecipients.trim()===''){
                    pass = false;
                    this.invoiceRecipientsError = true;
                }
                if(!this.utils.testPhoneNumber(this.invoicePhone)){
                    pass = false;
                    this.invoicePhoneError = true;
                }
                if(this.detailAddress.trim()===''){
                    pass = false;
                    this.detailAddressError = true;
                }
                if(pass){
                    this.$request.addInvoice({
                        invoiceContent:this.invoiceContent,
                        invoiceDetailedAddress: this.detailAddress,
                        invoiceDutyParagraph: this.invoiceDutyParagraph,
                        invoiceExclusiveType: this.invoiceExclusiveType,
                        invoiceMoney: Number(this.totalFee),
                        invoicePhone: this.invoicePhone,
                        invoiceRecipients: this.invoiceRecipients,
                        invoiceRemark: this.invoiceRemark,
                        invoiceTitle: this.invoiceTitle,
                        invoiceType: this.invoiceType,
                        orderIds: this.checkedInvoice
                    }).then(res=>{
                        console.log(res);
                        if(res.status==200){
                            this.requestOrderList();
                            this.requestInvoiceList();
                            this.maskShow = false;
                            this.$message({
                                type:'success',
                                message:'请求成功！'
                            });
                        }else {
                            this.requestError(res.status,res.message);
                        }
                    },err=>{
                        this.loading = false;
                        console.log(err);
                        this.requestFail(err);
                    })
                }

            },
            requestOrderList(){
                this.$request.myInvoiceOrderList({
                    page:1,
                    size: 1000
                }).then(res=>{
                    console.log(res);
                    this.loading = false;
                    if(res.status==200){
                        let appOrders = res.data?res.data.appOrders:[];
                        this.orderList = appOrders.filter(item=>{
                            return item.invoiceStatus === 0;
                        });
                    }else {
                        this.requestError(res.status,res.message);
                    }
                },err=>{
                    this.loading = false;
                    console.log(err);
                    this.requestFail(err);
                })
            },
            requestInvoiceList(){
                this.$request.myInvoiceList({
                    page:1,
                    size: 1000
                }).then(res=>{
                    console.log(res);
                    this.loading = false;
                    if(res.status==200){
                        this.invoiceList = res.data
                        console.log("---------------", this.invoiceList);
                    }else {
                        this.requestError(res.status,res.message);
                    }
                },err=>{
                    this.loading = false;
                    console.log(err);
                    this.requestFail(err);
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    #page-my-invoice{
        @moudle-bg-color:#ffffff;
        @under-line:1px solid #F5F5FB;
        font-family:'Microsoft YaHei','微软雅黑';
        .color(#090909);
        .fz(16px);

        #mask-layer{
            @main-text-color:#68717C;
            @placeholder-color:#C2C2C2;
            .over-screen(fixed);
            .mask {
                .over-screen(absolute, 53);
                z-index: 996;
            }

            .content{
                .size(710px);
                .height(auto);
                .min-height(495px);
                .center(translate);
                background-color: #ffffff;
                z-index: 997;
                .border-radius(10px);
                box-shadow:0 0 13px 0 rgba(0, 0, 0, 0.38);
                padding: 0 20px;

                hr{
                    border-color: #E4E4E4;
                }
                .top{
                    .center(text-x);
                    .color(#67717D);
                    .fz(16px,58px);
                    i{
                        .size(22px,18px);
                        .bg('@{img-base-url}myInvoice_icon-invoice-info.png');
                        margin-right: 6px;
                    }
                }
                form{
                    .color(#68717C);
                    .radio{
                        margin: 23px 0;
                        input[type="radio"] {
                            position: absolute;
                            opacity: 0;
                        }
                        label{
                            .color(#A9A9A9);
                            cursor: pointer;
                            margin-left: 43px;
                            .fz(14px);
                            &:nth-of-type(1){
                                margin-left: 82px;
                            }
                        }
                        input[type="radio"] + .radio-label:before {
                            .size(16px,16px);
                            content: '';
                            background: #f4f4f4;
                            border-radius: 100%;
                            border: 1px solid #b4b4b4;
                            display: inline-block;
                            position: relative;
                            margin-right: 10px;
                            vertical-align: top;
                            text-align: center;
                            -webkit-transition: all 250ms ease;
                            transition: all 250ms ease;
                        }
                        input[type="radio"]:checked + .radio-label:before {
                            background-color: #F29C38   ;
                            box-shadow: inset 0 0 0 3px #f4f4f4;
                            border-color: #F29C38;
                        }
                        input[type="radio"]:focus + .radio-label:before {
                            outline: none;
                        }
                        input[type="radio"]:disabled + .radio-label:before {
                            box-shadow: inset 0 0 0 4px #f4f4f4;
                            border-color: #b4b4b4;
                            background: #b4b4b4;
                        }
                        .radio input[type="radio"] + .radio-label:empty:before {
                            margin-right: 0;
                        }
                    }
                    .form-item{
                        /*margin-top: 20px;*/
                        border: none;
                        .clearfix;
                        margin: 10px 0;
                        .title{
                            display: inline-block;
                            font-weight: normal;
                            line-height: 35px;
                            .fz(14px);

                            .must-fill{
                                .color(#D70C0C);
                                margin-right: 10px;
                                font-weight: bold;
                            }

                            &+span{
                                line-height: 35px;
                                .fz(14px);
                            }
                        }
                        &>span{
                            position: relative;
                        }

                        input{
                            .width(250px);
                            .height(28px);
                            border:1px solid rgba(207,207,207,1);
                            .border-radius(3px);
                            .fz(12px);
                            padding-left: 10px;
                            vertical-align: middle;
                            .beauty-placeholder(custom,color,@placeholder-color);

                            &#input-address,&#input-detail-address{
                                .width(583px);
                            }
                            &+.format-error-sign{
                                position: absolute;
                                top: 35px;
                                right: 0;
                                .fz(12px);
                            }
                        }

                        &.two-item{
                            input{
                                .width(250px);
                            }
                        }

                    }
                }
                .dangers-sign{
                    margin-left: 15px;
                    .color(@placeholder-color);
                    .fz(12px);
                    text-indent: -15px;
                    line-height: 22px;
                    i{
                        .size(11px,11px);
                        .bg('@{img-base-url}myInvoice_icon-warning.png');
                    }
                }
                .btn{
                    .center(text-x);
                    margin-bottom: 15px;
                    button{
                        .width(85px);
                        .border-radius(3px);
                        border: 1px solid @main-color;
                        .color(@main-color);
                        .fz(14px,30px);

                        &.confirm{
                            background-color: @main-color;
                            .color(#ffffff);
                            margin-left: 13px;
                        }
                    }
                }

                &.return-invoice{
                    .top{
                        i{
                            .bg('@{img-base-url}myInvoice_icon-invoice-return.png');
                        }
                    }

                    .form-item{
                        .not-return-reason{
                            .color(@color-error);
                            margin-left: 10px;
                            .fz(14px);
                        }
                        textarea{
                            .size(578px,60px);
                            border: 1px solid #E4E4E4;
                            .border-radius(3px);
                            vertical-align: text-top;
                            resize: none;
                        }

                    }
                    .dangers-sign{
                        margin-left: 15px;
                        .color(@placeholder-color);
                        .fz(12px);
                        text-indent: -15px;
                        line-height: 22px;
                        i{
                            .bg('@{img-base-url}myInvoice_icon-warning-gray.png');
                        }
                    }
                    .express-info{
                        display: inline-block;
                        .color(#68717C);
                        .fz(14px);
                        line-height: 30px;
                        margin-left: 15px;
                        margin-top: 10px;
                    }

                }
            }
        }
        .invoice-wrap{
            padding: 10px 20px;
            background-color: @moudle-bg-color;
            margin-top: 10px;
            .top-menu-wrap{
                ul.tab-list{
                    display: inline-block;
                    .color(#67717D);
                    &>li{
                        display: inline-block;
                        background-color: #E9E9E9;
                        .border-radius(3px);
                        padding: 6px 10px;
                        cursor: pointer;
                        &+li{
                            margin-left: 20px;
                        }

                        &.active{
                            .color(#ffffff);
                            background-color: @main-color;
                        }
                        i{
                            margin-right: 3px;
                        }

                        &:nth-of-type(1){
                            i{
                                .size(17px,13px);
                                .bg('@{img-base-url}myInvoice_icon-tab-1.png');
                            }
                            &.active{
                                i{
                                    .bg('@{img-base-url}myInvoice_icon-tab-1-active.png');
                                }
                            }
                        }
                        &:nth-of-type(2){
                            i{
                                .size(24px,14px);
                                .bg('@{img-base-url}myInvoice_icon-tab-2.png');
                            }
                            &.active{
                                i{
                                    .bg('@{img-base-url}myInvoice_icon-tab-2-active.png');
                                }
                            }
                        }
                    }
                }
            }
            table{
                .width(100%);
                table-layout:fixed;
                .color(#67717D);
                .lh(47px);
                .fz(16px);
                text-align: center;
                border: 1px solid #E4E4E4;
                margin-top: 10px;

                thead{
                    background-color: #F7F7F7;
                    font-weight: bold;
                }
                tbody{
                    td.item-main{
                        //.min-width(330px);
                        text-align: left;
                    }
                    td.control{
                        .color(#418EC6);
                        span{
                            cursor: pointer;
                        }
                    }
                }
                tr{
                    border-top: 1px solid #E4E4E4;
                    td{
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &.item-main{
                            width: 40%;
                        }
                        &.date{
                            width: 25%;
                        }
                    }
                }

                input[type="checkbox"] {
                    position: absolute;
                    opacity: 0;
                }
                label{
                    .height(48px);
                    cursor: pointer;
                    position: relative;
                    .fl;
                    margin-right: 33px;
                }
                input[type="checkbox"] + label:before {
                    .size(13px,13px);
                    content: '';
                    background: #f4f4f4;
                    /*border-radius: 100%;*/
                    border: 1px solid #b4b4b4;
                    display: inline-block;
                    /*position: relative;*/
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 8px;
                    /*margin-right: 10px;*/
                    vertical-align: top;
                    text-align: center;
                    -webkit-transition: all 250ms ease;
                    transition: all 250ms ease;
                }
                input[type="checkbox"]:checked + label:before {
                    background-color: #F29C38   ;
                    box-shadow: inset 0 0 0 3px #f4f4f4;
                    border-color: #F29C38;
                }
                input[type="checkbox"]:focus + label:before {
                    outline: none;
                }
                input[type="checkbox"]:disabled + label:before {
                    box-shadow: inset 0 0 0 4px #f4f4f4;
                    border-color: #b4b4b4;
                    background: #b4b4b4;
                }
                .radio input[type="checkbox"] + label:empty:before {
                    margin-right: 0;
                }
            }
            .bottom-wrap{
                .clearfix;
                margin-top: 20px;
                .sign{
                    .fr;
                    line-height: 17px;
                    text-align: right;

                    .up{
                        .color(#131313);
                        .fz(14px);
                        .total-fee{
                            .color(@main-color);
                            .fz(16px);
                            font-weight: bold;
                        }
                    }
                    .down{
                        .color(#AEAEAE);
                        .fz(14px);
                    }
                }
                #btn-invoicing{
                    .size(101px,35px);
                    .fr;
                    .color(#F6F6F6);
                    .fz(16px,35px);
                    background-color: @main-color;
                    .border-radius(3px);
                    font-weight: bold;
                    .center(text);
                    margin-left: 17px;
                }
            }
        }
    }
</style>